<template>
  <view class="container">
    <!-- 顶部选项卡 -->
    <view class="tab-bar">
      <view class="tab-item" :class="{ active: currentTab === '已上架' }" @click="currentTab = '已上架'">已上架</view>
      <view class="tab-item" :class="{ active: currentTab === '已下架' }" @click="currentTab = '已下架'">已下架</view>
    </view>
    <!-- 商品列表 -->
    <view class="product-list" v-if="currentTab === '已上架'">
      <view class="product-item" v-for="(product, index) in onSaleGoodsList" :key="index">
        <view class="product-img"></view>
        <view class="product-info">
          <view class="product-title">{{ product.buildingName }}</view>
          <view class="product-price">￥ {{ product.address }}</view>
          <view class="product-title">{{ getProductStateText(product.state) }}</view>
          <view class="product-stats">
            <view>浏览量: {{ product.viewCount }}人次</view>
          </view>
        </view>
        <view class="product-actions">
          <!-- 下架 -->
          <button class="action-button" @click="disableBuilding(product.id)">下 架</button>
          <button class="action-button" @click="checkBuilding(product.id)">修改/查看</button>
        </view>
        <view class="product-checkbox">
          <checkbox :value="product.id" v-model="product.checked" @change="handleCheckboxChange(product)"></checkbox>
        </view>
      </view>
    </view>

    <!-- 已下架 -->
    <view class="product-list" v-if="currentTab === '已下架'">
      <view class="product-item" v-for="(product, index) in offSaleGoodsList" :key="index">
        <view class="product-img"></view>
        <view class="product-info">
          <view class="product-title">{{ product.buildingName }}</view>
          <view class="product-price">￥ {{ product.address }}</view>
          <view class="product-title">{{ getProductStateText(product.state) }}</view>
          <view class="product-stats">
            <view>浏览量: {{ product.viewCount }}人次</view>
          </view>
        </view>
        <view class="product-actions">
          <!-- 上架 -->
          <button class="action-button" @click="enableBuilding(product.id)" v-if="product.state === 0">审 核</button>
          <button class="action-button" @click="enableBuilding(product.id)" v-if="product.state === 2">上 架</button>
          <button class="action-button" @click="checkBuilding(product.id)">修改/查看</button>
        </view>
        <view class="product-checkbox">
          <checkbox :value="product.id" v-model="product.checked" @change="handleCheckboxChange(product)"></checkbox>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="action-buttons">
        <view class="select-all">
          <label>全选</label>
          <checkbox v-model="isAllSelected" @change="handleSelectAll"></checkbox>
        </view>
      </view>
      <view class="confirm-button-container">
        <button class="confirm-btn" :disabled="!isAnySelected" @click="confirmRemove">确认下架</button>
      </view>
    </view>
    <view class="add-icon-container">
      <view class="add-icon" @click="addProduct">
        <text>+</text>
      </view>
    </view>
  </view>
</template>

<script>
import { disableBuilding, enableBuilding, getAdminBuildings } from "@/api/building.js";

export default {
  data() {
    return {
      goodsList: [],
      onSaleGoodsList: [],
      offSaleGoodsList: [],
      goodsParams: {
        pageNumber: 1,
        pageSize: 10,
        storeId: "",
      },
      currentTab: '已上架',
      productList: [
        {
          id: 1,
          title: '精美电水壶，带加热功...',
          price: 30,
          views: 200,
          deals: 45,
          checked: false,
          state: 0
        },
        {
          id: 2,
          title: '金品房源，精装修 大户型...',
          price: 1580000,
          views: 200,
          deals: 2,
          checked: false,
          state: 1
        }
      ],
      isAllSelected: false,
      selectedProducts: []
    };
  },
  computed: {
    isAnySelected() {
      return this.selectedProducts.length > 0;
    }
  },
  onLoad() {
    this.getGoodsData();
  },
  // 下拉加载
  onReachBottom() {
    this.goodsParams.pageNumber++;
    this.getGoodsData();
  },
  methods: {
    /** 加载商品 */
    async getGoodsData() {
      let res = await getAdminBuildings(this.goodsParams);
      if (res.statusCode === 200) {
        this.goodsList.push(...res.data);
        this.onSaleGoodsList = this.goodsList.filter(item => item.state === 1);
        this.offSaleGoodsList = this.goodsList.filter(item => item.state != 1);
      }
    },
    getProductStateText(state) {
      return state === 1 ? '已上架' : '未上架';
    },
    handleCheckboxChange(product) {
      // 单选事件处理
      console.log(`商品 ${product.title} 的选中状态变为: ${product.checked}`);
      // 更新已选商品列表
      if (product.checked) {
        this.selectedProducts.push(product.id);
      } else {
        const index = this.selectedProducts.indexOf(product.id);
        if (index !== -1) {
          this.selectedProducts.splice(index, 1);
        }
      }
      // 更新全选状态
      const currentList = this.currentTab === '已上架' ? this.onSaleGoodsList : this.offSaleGoodsList;
      this.isAllSelected = currentList.every(item => item.checked);
    },
    handleSelectAll() {
      const currentList = this.currentTab === '已上架' ? this.onSaleGoodsList : this.offSaleGoodsList;
      currentList.forEach(product => {
        product.checked = this.isAllSelected;
      });
      this.selectedProducts = this.isAllSelected
          ? currentList.filter(item => item.state === 1).map(product => product.id)
          : [];
    },
    confirmRemove() {
      // 确认下架的业务逻辑
      console.log('确认下架的商品:', this.selectedProducts);
    },
    addProduct() {
      // 新增商品的业务逻辑
      console.log('点击新增商品');
      uni.navigateTo({
        url: '/pages/store/createBuilding'
      });
    },
    async disableBuilding(id) {
      try {
        const res = await disableBuilding(id);
        if (res.statusCode === 200) {
          const product = this.goodsList.find(item => item.id === id);
          if (product) {
            product.state = 0;
            this.onSaleGoodsList = this.goodsList.filter(item => item.state === 1);
            this.offSaleGoodsList = this.goodsList.filter(item => item.state != 1);
          }
          console.log('商品下架成功');
        } else {
          console.log('商品下架失败');
        }
      } catch (error) {
        console.error('商品下架出错:', error);
      }
    },
    async enableBuilding(id) {
      try {
        const res = await enableBuilding(id);
        if (res.statusCode === 200) {
          const product = this.goodsList.find(item => item.id === id);
          if (product) {
            product.state = 1;
            this.onSaleGoodsList = this.goodsList.filter(item => item.state === 1);
            this.offSaleGoodsList = this.goodsList.filter(item => item.state != 1);
          }
          console.log('商品上架成功');
        } else {
          console.log('商品上架失败');
        }
      } catch (error) {
        console.error('商品上架出错:', error);
      }
    },
    checkBuilding(id) {
      uni.navigateTo({
        url: '/pages/store/createBuilding?id=' + id
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.tab-bar {
  display: flex;
  justify-content: center;
  border-bottom: 1rpx solid #ccc;
}
.tab-item {
  padding: 10rpx 20rpx;
  color: #666;
}
.tab-item.active {
  color: #000;
  border-bottom: 2rpx solid #000;
}
.product-list {
  margin-top: 20rpx;
}
.product-item {
  display: flex;
  margin-bottom: 20rpx;
  border: 1rpx solid #eee;
  padding: 10rpx;
  align-items: center;
}
.product-img {
  width: 15%;
  background-color: #f0f0f0;
  margin-right: 10rpx;
}
.product-info {
  flex: 1;
}
.product-title {
  font-size: 28rpx;
  color: #333;
}
.product-price {
  font-size: 32rpx;
  color: #f60;
  margin-top: 5rpx;
}
.product-stats {
  font-size: 28rpx;
  color: #999;
  margin-top: 5rpx;
}
.product-checkbox {
  margin-left: 10rpx;
}
.product-actions {
  display: block; /* 修改为上下排列 */
  margin-left: 10rpx;
}
.action-button {
  //padding: 15rpx 30rpx; /* 调整内边距 */
  border: none;
  border-radius: 8rpx; /* 调整边框圆角 */
  margin-left: 0; /* 去掉左外边距 */
  margin-top: 10rpx; /* 添加顶部外边距 */
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 30rpx; /* 调整字体大小 */
}
.action-button:hover {
  opacity: 0.8;
}
.action-button:first-child {
  background-color: #ff4d4f;
  color: #fff;
}
.action-button:last-child {
  background-color: #1890ff;
  color: #fff;
}
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10rpx 20rpx;
  border-top: 1rpx solid #ccc;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.action-buttons {
  display: flex;
  align-items: center;
}
.select-all {
  display: flex;
  align-items: center;
}
.confirm-button-container {
  width: 45%;
}
.confirm-btn {
  background-color: #ccc;
  color: #fff;
  padding: 15rpx 30rpx; /* 调整内边距 */
  border: none;
  border-radius: 8rpx; /* 调整边框圆角 */
  width: 100%;
  font-size: 30rpx; /* 调整字体大小 */
}
.confirm-btn[disabled] {
  background-color: #eee;
  color: #999;
}
.add-icon-container {
  position: absolute;
  bottom: 10%;
  right: 20rpx;
}
.add-icon {
  position: relative;
  bottom: 20rpx;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  background-color: #f90;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30rpx;
  color: #fff;
}
</style>